<template>
  <div v-show="hasPerms(perms)">
      <el-form
        :model="dataForm"
        label-width="120px"
        ref="dataForm"
        :size="size"
      >
        <el-row style="display:flex;">
          <el-form-item label="结算单号:" prop="description">
            1912270006949402
          </el-form-item>
          <el-form-item label="单据状态:" prop="description">
            待确认
          </el-form-item>
          <el-form-item label="制单时间:" prop="description">
            2019-12-27 14:32:06
          </el-form-item>
        </el-row>
        <el-row style="display:flex;">
          <el-form-item label="结算对象类型:" prop="description">
            总部
          </el-form-item>
          <el-form-item label="结算对象名称:" prop="description">
            默认商家
          </el-form-item>
          <el-form-item label="结算币别:" prop="description">
            GBP
          </el-form-item>
        </el-row>
        <el-row style="display:flex;">
          <el-form-item label="汇率:" prop="description">
            1
          </el-form-item>
          <el-form-item label="进退货总金额:" prop="description">
            0.00
          </el-form-item>
          <el-form-item label="费用应收金额:" prop="description">
            0.00
          </el-form-item>
        </el-row>
        <el-row style="display:flex;">
          <el-form-item label="费用应付金额:" prop="description">
            0.00
          </el-form-item>
          <el-form-item label="最终应付金额:" prop="description">
            0.00
          </el-form-item>
          <el-form-item label="已付金额:" prop="description">
            0.00
          </el-form-item>
        </el-row>
        <el-row style="display:flex;">
          <el-form-item label="未核销金额:" prop="description">
            0.00
          </el-form-item>
        </el-row>

        <el-tabs :tab-position="tabPosition" type="border-card" style="height: auto;">
          <el-tab-pane label="对账明细">
            <BillDetailForm></BillDetailForm>
          </el-tab-pane>
          <el-tab-pane label="费用信息">
            <BillDetailForm></BillDetailForm>
          </el-tab-pane>
          <el-tab-pane label="发票信息">
            <logComponent></logComponent>
          </el-tab-pane>
          <el-tab-pane label="操作日志">
            <logComponent></logComponent>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: center;margin-top: 2%;">
            <el-button type="success" plain style="width:90px" @click.native="submitForm">保存</el-button>
            <el-button type="danger" plain style="width:90px" @click="cancel">取消</el-button>
        </div>
      </el-form>
  </div>
</template>

<script>
import { hasPermission } from '@/permission/index.js';
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import logComponent from '@/views/Pages/Procurement/ProviderComponent/LogComponent';
import BillDetailForm from "@/views/Paje/BillDetailForm";

export default {
  name: 'addSettleBill',
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog,
    logComponent,
    BillDetailForm,
  },
  props: {
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    show: {  // 按钮是否展示
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      editDialogVisibleLianxiren:false,
        value: [],
        // options:citys,
        size: "small",
        tabPosition:"top",
        dataForm:{
            "name":"商家1",
            "order_flg":"1",
            "baojiaType":"含税",
            "morenAddress":"总部",
            "payGongyingshang":"自己",
            "songhuo":"自己"
        },
        imageUrl:'',
        imageUrlCard:'',
        imageUrlCardTwo:'',
      editDialogVisible: false, // 新增编辑界面是否显示
      columnsTable:[
        {prop: "id", label: "供应商编码", minWidth: 50,sortable:false},
        {prop: "供应商名称", label: "供应商名称", minWidth: 120},
      ],
      filterColumnsTable:[],
      pageResultTable: {},
        selections:[],
        flag:''
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms: function (perms) {
      if(this.show == false){
        return this.show
      }
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms)
    },
    // 编辑
    submitForm: function() {
      this.$confirm("确认提交吗？", "提示", {}).then(() => {
        var this_ = this;
        this_.$message({message: "操作成功", type: "success"});
        this_.$refs["dataForm"].resetFields();
        this_.cancel();
      });
    },
    cancel: function(){
      this.$emit('cancelClick', {});
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-icon-plus{
      border: 1px dashed #d9d9d9;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #2F4554;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .dis input{
      background-color: #F5F7FA;
    }
    .selectshangjia{
      width: 400px;
      height: 32px;
      line-height: 32px;
      -webkit-appearance: none;
      background-color: #FFF;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      background-color: #F5F7FA;
      border-color: #E4E7ED;
      color: #C0C4CC;
      cursor: not-allowed;
}
.selectshangjia::-webkit-input-placeholder {
  color: #C0C4CC;
}
.selectshangjia::-moz-input-placeholder {
  color: #C0C4CC;
}
.selectshangjia::-ms-input-placeholder {
  color: #C0C4CC;
}
</style>
